@extends('front.layouts.app')
@section('title',$product->pro_name)
@section('style')
 <style>
        div.imgAndInfo{
            width: 90%;
        }
        div.imgInimgAndInfo{
         width: 400px;
         float: left;
        }
        div.imgAndInfo img.bigImg{
         width: 90%;
         height: 300px;
        }
        div.imgAndInfo div.smallImageDiv{
            border-top: 1px solid #ddd;
            margin:10px auto;
         width: 100%;
        }
        div.imgAndInfo img.smallImage{
         width: 60px;
         margin-top: 20px;
         height: 60px;
         border: 2px solid white;
        }
        div.imgAndInfo img.smallImage:hover{
         border: 2px solid black;
        } 
        </style>
        <script>
            const id ={{$product->id}}
        </script>

@endsection
@section('content')
<nav class="bg-white" id="menu-bar" >
  
        <div class="container" style="line-height: 60px;"> 
            <div class="float-left">

                {{$product->pro_name}}
                
            </div>
                <div class="float-right">
                   <ul class="nav nav-tabs" id="myTabs" role="tablist" class="border-0" style="border-bottom: none">
                  <li class="nav-item">
                    <a class="nav-link active border-0"  id="details-tab" data-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="true">详情</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link border-0" id="companyprofile-tab" data-toggle="tab" href="#companyprofile" role="tab" aria-controls="profile" aria-selected="false">参数</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link border-0" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">评价</a>
                  </li> 
                </ul>
                </div>
            <div>
                <script>
                   $('#myTabs a').on('click', function (e) {
                          e.preventDefault()
                          $(this).tab('show')
                        })
                </script>
                 
            </div>
        </div> 
</nav>
    <section class="mt-3" id="details-tab">
            <div class="container">  
                    <div class="col-sm-12 ">
                        <div class="product-details">
                            <!--product-details-->
                            <div class="col-lg-4 float-left" style="position: relative;">
                            <div class="imgAndInfo" id="img-slide">
                             <div class="imgInimgAndInfo">
{{-- 
                                    <img alt="" class="" style="position: absolute;right: 0" src="{{ asset('home/images/product-details/new.jpg') }}"/> --}}
                              <img width="100px" class="bigImg" src="{{asset('productpics/').'/'.$product->pro_img}}">
                              <div class="smallImageDiv" style="position: relative;">

                                <img width="100px" class="smallImage" src="{{asset('productpics/').'/'.$product->pro_img}}" bigImageURL="{{asset('productpics/').'/'.$product->pro_img}}" style="border:2px solid orange" >
                                <span style="display: block;height: 20px;width: 20px;text-align:center;border:1px solid orange;border-radius:100%;position: absolute;top:20px;z-index:999;background: red;color:#fff;">主</span>

                                
                                @foreach($product->images as $image)
                                <img width="100px" class="smallImage" src="{{url($image->image_path)}}" bigImageURL="{{url($image->image_path)}}"> 
                                @endforeach
                              </div>
                             <div class="img4load hidden" ></div>  
                             </div>
                             <div style="clear:both"></div>
                            </div>
                            
                            </div>
                            <div class="col-lg-8 float-left m-0 p-0">
                                <div class="product-information" style="border: none; padding-top: 0">
                                    <!--/product-information--> 
                                <p><h6>{{$product->pro_name}} <span id="attr-title"></span></h6></p>
                                
                                <p style="font-size: 10px">
                                    {{$product->pro_info}}
                                </p>
                                <p class="text-danger">
                                    <span id="price-default">{{floor($product->pro_prices)}}</span>元
                                </p>
                                <hr>
                                    <div class="text-center" id="load-attr">
                                        <i class=" fa fa-spin fa-spinner fa-3x" style="color: orange"></i>
                                    </div> 
                                <div style="display:none;" id="attr">
                                    <div id="attr-box"></div>
                                     <div class="btn-group">
                                         
                                    <button class="btn btn-fefault cart" style="margin: 0;background:red;color:#fff" type="button">
                                        <i class="fa fa-shopping-cart">
                                        </i>
                                        立即购买
                                    </button>
                                          @guest
                                         @else
                                    @if(count($wcount) === 0 )  
                                    <a class="btn btn-success cart" href="javascript:viod(0);" onclick="event.preventDefault();
         document.getElementById('logout-form').submit();" style="margin: 0">
                                        <i class="fa fa-star">
                                        </i>
                                        愿望清单
                                    </a>
                                    <form action="{{route('add-wishlist')}}" id="logout-form" method="POST" style="display: none;">
                                        <input type="hidden" name="product_id" title="code!" value="{{$product->pro_code}}">
                                        {{ csrf_field() }}
                                    </form>
                                    @else 
                                        <a href="{{route('index.wishlist')}}#{{$product->id}}" class="btn btn-info">已在愿望单<i class="fa fa-coffee"></i></a>
                                    @endif
                                    @endif
                                     </div>
                                </div>
                                   
                                    <a href="">
                                        <img alt="" class="share img-responsive" src="images/product-details/share.png"/>
                                    </a>
                                </div>
                                <!--/product-information-->
                            </div>
                        </div>
                        <!--/product-details--> 
                        
                       </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="container-fluid m-0" >
            
            <div class="category-tab container shop-details-tab" >
 

                            <div class="tab-content">
                                <div class="tab-pane fade show active in" id="details">
                                    <div class="col-lg-12">
                                        {!! $product->pro_description !!}
                                    </div> 
                                </div>
        <script src="{{ asset('home/js/details.js') }}"></script>

                                <div class="tab-pane fade" id="companyprofile" style="height: 500px;">
                                      
                                </div> 
                                <div class="tab-pane fade " id="reviews">
                                    <div class="col-sm-12">
                                        <ul>
                                            <li>
                                                <a href="">
                                                    <i class="fa fa-user">
                                                    </i>
                                                    EUGEN
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <i class="fa fa-clock-o">
                                                    </i>
                                                    12:41 PM
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <i class="fa fa-calendar-o">
                                                    </i>
                                                    31 DEC 2014
                                                </a>
                                            </li>
                                        </ul>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                        </p>
                                        <p>
                                            <b>
                                                Write Your Review
                                            </b>
                                        </p>
                                        <form action="#">
                                            <span>
                                                <input placeholder="Your Name" type="text"/>
                                                <input placeholder="Email Address" type="email"/>
                                            </span>
                                            <textarea name="">
                                            </textarea>
                                            <b>
                                                Rating:
                                            </b>
                                            <img alt="" src="images/product-details/rating.png"/>
                                            <button class="btn btn-default pull-right" type="button">
                                                Submit
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/category-tab-->
        </section>
        <!--/Footer--> 
        <script src="{{ asset('home/js/lib.js') }}"></script>
         <script>
            getOneAttr('{{route("unique.attr")}}', '{{$product->id}}');
            $("#menu-bar").smartFloat();
        </script>
@endsection